<template>
    <div class="main">


        <header-view v-if="showHeader"></header-view>
        <router-view></router-view>
        <footer-view @selectTabbar="selectTabbar" :list="list" v-show="showFooter"></footer-view>
    </div>

</template>

<script>
    import HeaderView from '../../common/HeaderView.vue'
    import FooterView from '../../common/FooterView.vue'


    //    const routeNames = ['home', 'prod','trip_list', 'user_center'];
    const name1 = ['home'];
    const name2 = ['HotelReservation'];
    const name3 = ['trip_list'];
    const name4 = ['user_center'];
    let routeNames = name1.concat(name2, name3, name4);
    import tool from './../../config/mUtil/tool'
    import info from './../../config/info'
    import {fenXiang,httpGetTabbar} from './../../service/httpService'
    import {Toast} from 'mint-ui'

    export default {
        name: "MainView",
        components: {
            HeaderView, FooterView
        },
        data() {
            return {
                selectIndex: 0,
                showHeader: false,
                showFooter: true,
                list: []
            }
        },
        watch: {
            $route(to, from) {
                this.setInfo(to.name);
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在 页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready 函数中。
                wx.ready(function(){
                    // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                    wx.onMenuShareTimeline({
                        title: '蜘蛛出行-'+document.title, // 分享标题
                        link: encodeURI(window.location.href),
                        imgUrl: "http://img.zhizhuchuxing.cn/zzwx/logo.jpg" // 分享图标
                    });
                    // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
                    wx.onMenuShareAppMessage({
                        title: '蜘蛛出行-'+document.title, // 分享标题
                        desc: "【蜘蛛出行】安全舒适便捷的巴士出行品牌", // 分享描述
                        link:encodeURI(window.location.href),
                        imgUrl: "http://img.zhizhuchuxing.cn/zzwx/logo.jpg", // 分享图标
                        type: 'link' // 分享类型,music、video或link，不填默认为link
                    });
                });
            }
        },
        mounted() {
            this.load();
            let ua = tool.myBrowser();
            if(ua.appType === 'micromessenger'){
                fenXiang({
                    url:encodeURI(window.location.href)
                }).then(result=>{
                    // 微信配置
                    wx.config({
                        debug: false,
                        appId: result.appId,
                        timestamp: result.timestamp,
                        nonceStr: result.nonceStr,
                        signature: result.signature,
                        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 功能列表，我们要使用JS-SDK的什么功能
                    });
                    wx.ready(function(){
                        // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                        wx.onMenuShareTimeline({
                            title: '蜘蛛出行-'+document.title, // 分享标题
                            link: encodeURI(window.location.href),
                            imgUrl: "http://img.zhizhuchuxing.cn/zzwx/logo.jpg" // 分享图标
                        });
                        // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
                        wx.onMenuShareAppMessage({
                            title: '蜘蛛出行-'+document.title, // 分享标题
                            desc: "【蜘蛛出行】安全舒适便捷的巴士出行品牌", // 分享描述
                            link:encodeURI(window.location.href),
                            imgUrl: "http://img.zhizhuchuxing.cn/zzwx/logo.jpg", // 分享图标
                            type: 'link' // 分享类型,music、video或link，不填默认为link
                        });
                    });
                });
            }

        },
        methods: {
            load(){
              this.list = [
                {
                  'name':'出行',
                  'img_s':'http://img.zhizhuchuxing.cn/zzwx/zzcximg/image/tabbar/shouye_s.png',
                  'img_n':'http://img.zhizhuchuxing.cn/zzwx/zzcximg/image/tabbar/shouye_n.png',
                  'url':'home'
                },
                {
                  'name':'我的',
                  'img_s':'http://img.zhizhuchuxing.cn/zzwx/zzcximg/image/tabbar/wode_s.png',
                  'img_n':'http://img.zhizhuchuxing.cn/zzwx/zzcximg/image/tabbar/wode_n.png',
                  'url':'user_center'
                }
              ];
              tool.log(this.list)
              this.list.map(x=>{
                this.$set(x,'flag',false);
              });
              let toName = this.$router.history.current.name;
              this.setInfo(toName);
            },
            setInfo(toName){
                this.list.map(x=>{
                    if(x.url===toName){
                        x.flag=true;
                    }
                });
                this.showFooter = routeNames.indexOf(toName)!==-1;
            },
            selectTabbar(item) {

                tool.$router.push(this, {
                    name: item.url
                })
            }
        }
    }
</script>

<style>
</style>
